import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Icon, List } from 'antd-mobile';
import moment from 'moment';
import NavBar from 'components/navBar';
import ContactItem from 'components/contactItem';
import styled from 'styled-components';
import * as chatActions from 'actions/chat';
import socket from 'utils/socket';
import _ from 'lodash';

const Item = List.Item;
const Brief = Item.Brief;

const Wrapper = styled.ul`
    background-color: #fff;
    border-bottom: 1px solid #ddd;
`
@connect(state => {

    return {
        user: state.login.user,
        linkmans: state.chat.linkmans
    }
}, dispatch => ({
    chatActions: bindActionCreators(chatActions, dispatch)
}))
export default class Contact extends Component {
    constructor(props) {
        super(props);
        
    }
    
    handleAdd() {
        console.log(1);
    }
    render() {
        const { user, linkmans } = this.props;
        return (
            <div>
                <NavBar
                    leftContent={user.name}
                    rightContent={<Icon type='plus' onClick={this.handleAdd.bind(this)}/>}
                >
                    消息
                </NavBar>
                <Wrapper>
                    
                    {
                        Object.keys(linkmans).map(item => {
                            const linkman = linkmans[item][linkmans[item].length - 1];                                                                                            
                            const friend_group = user.id === linkman.to._id ? { ...linkman.from } : { ...linkman.to };      
                            return (
                                <ContactItem key={linkman._id} 
                                    content={`${linkman.toWho === 'group' ? `${linkman.from.name}:` : ''}${linkman.content}`} 
                                    time={moment(linkman.create_time).format('YYYY-MM-DD HH:mm:ss')} 
                                    id={friend_group._id} 
                                    username={friend_group.name}
                                    group={!!(linkman.toWho === 'group')}
                                />
                            )
                        })
                    }
                </Wrapper>
                    
                
            </div>
        )
    }
}